<template>
<view>
	<!-- 首页轮播图 -->
	<view class="banner">
		<swiper autoplay="true" interval="3000" circular="true" @change='swiperChange'>
			<swiper-item v-for="(item,index) in bannerList" :key="index">
				<image :src="item.image"></image>
					<view class="banner-info">{{item.title}}</view>
			</swiper-item>
		</swiper>
		<view class="banner-num">
			{{current}}/{{bannerList.length}}
		</view>
	</view>
	<!-- 每日一测 -->
	<view class="oneday">
	  <view class="item">
	    <image src='../../static/images/info_left.jpg'></image>
	    <view>每日一测</view>
	  </view>
	   <view class="item">
	    <image src='../../static/images/info_right.jpg'></image>
	    <view>每日食谱</view>
	  </view>
	</view>
	
	<!-- 内容信息列表展示 -->
	<view class="wrapper">
		<view class="list" v-for="(item,index) in list" :key="index" @click="indexDetail" :data-mark="item.id">
			<view class="title">{{item.title}}</view>
			<view class="list-info">
				<image :src="item.image"></image>
				<view class="info">
					<view class="desc">{{item.desc}}</view>
					<view class="readnum"><text>{{item.readNum}}</text>次阅读</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	// var http = require('../../utils/http.js')
	//引入辅助函数
	import {mapState,mapActions,mapGetter} from 'vuex'
	export default {
		data(){
			return{
				current:1,
				// bannerList:[],//轮播图数据
				// list:[]//列表容器数据
			}
		},
		mounted(){
			//获取轮播图
			this.getBannerList()
			//获取信息列表
			this.getList()
		},
		methods:{
			//派发actions
		...mapActions(['getBannerList','getList']),
		//轮播图播放时触发事件
		swiperChange(e){
			// console.log(e.detail)
			this.current = e.detail.current+1
		},
		indexDetail(e){
		// console.log(e)
		// console.log(e.currentTarget.dataset.mark);
		//向indexDetails传递点击也页面的id
		wx.navigateTo({
			url: '../indexDetail/indexDetail?id=' + e.currentTarget.dataset.mark,
		})
		}
				
		},
		//计算属性
		computed:{
			...mapState({
				bannerList :state=>state.indexData.bannerList,
				list:state=>state.indexData.list
			})
		}
	}
</script>
<style>
.banner{
	height: 338rpx;
	position: relative;
}
.banner swiper{
	height: 338rpx;
}
.banner image{
	width:100%;
	height: 338rpx;
}
.banner .swiper-item{
	position:relative;
}
.banner-info{
	position:absolute;
	height: 56rpx;
	line-height:56rpx;
	color:#fff;
	background-color: rgba(0,0,0,0.5);
	bottom:0;
	left:0;
	right: 0;
	font-size: 26rpx;
	text-align: center;
}
.banner-num{
	position: absolute;
	height: 56rpx;
	color: #fff;
	right: 10rpx;
	bottom: 0;
	font-size: 28rpx;
}
/* 每日一测*/
.oneday{
	display:flex;
	margin:40rpx 20rpx;
	text-align: center;
	justify-content: space-around;
	color: #666;
	font-size: 28rpx;
}
.item image{
	width:306rpx;
	height: 186rpx;
}
/* 文章列表 */
.list{
	margin-left:20rpx;
	margin-right:20rpx;
	padding-bottom:1rpx solid #eee;
	margin-top: 20rpx;
}
.title{
	font-size: 32rpx;
	color:#1a1a1a;
	margin-bottom: 10rpx;
}
.list-info{
	display: flex;
}
.list image{
	width:214rpx;
	height: 138rpx;
}
.info{
	padding-left:20rpx;
	height: 138rpx;
	position: relative;
	font-size: 24rpx;
	flex:1;
	}
	.desc{
		color:#666;
		line-height: 34rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
	}
	.readnum{
		pisition:absolute;
		right: 0;
		bottom:0;
		font-size: 24rpx;
	}
	.readnum text{
		color:red;
		padding-right: 4rpx;
	}
</style>